<template>
	<view class="curator-detail">
		<!-- 头部背景渐变 -->
		<view class="header-bg">
			<!-- 导航栏 -->
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<text class="iconfont icon-back">‹</text>
				</view>
				<view class="nav-right">
					<text class="nav-icon">⋯</text>
				</view>
			</view>
			
			<!-- 用户基本信息 -->
			<view class="user-info">
				<view class="avatar-container">
					<image class="avatar" :src="curatorInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="user-name">{{ curatorInfo.name }}</view>
				<view class="gender-icon" v-if="curatorInfo.gender">
					<text class="gender-text">{{ curatorInfo.gender === 'male' ? '♂' : '♀' }}</text>
				</view>
			</view>
			
			<!-- 基本资料 -->
			<view class="basic-info">
				<view class="info-row">
					<view class="info-item">
						<view class="info-label">城市</view>
						<view class="info-value">{{ curatorInfo.city }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">生日</view>
						<view class="info-value">{{ curatorInfo.birthday }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">身高</view>
						<view class="info-value">{{ curatorInfo.height }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">体重</view>
						<view class="info-value">{{ curatorInfo.weight }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 个人简介 -->
		<view class="profile-section">
			<view class="section-title">
				<text class="title-icon">👤</text>
				<text class="title-text">个人简介</text>
			</view>
			<view class="profile-content">
				<text class="profile-text">{{ curatorInfo.description }}</text>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="btn-row">
				<view class="action-btn secondary" @click="sendMessage">
					<text class="btn-text">发消息</text>
				</view>
				<view class="action-btn primary" @click="followCurator">
					<text class="btn-text">{{ curatorInfo.isFollowed ? '已关注' : '关注' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { one } from '@/common/data.js'

// 响应式数据
const curatorInfo = ref({
	id: '',
	name: '吴世辉',
	avatar: '/static/logo.png', // 默认头像
	gender: 'male',
	city: '西安',
	birthday: '1990-03-14',
	height: '175cm',
	weight: '65kg',
	description: '专业探店，美食娱乐，景点，足浴，丽人均可，等级4',
	isFollowed: false
})

// 页面加载
onLoad((options) => {
	console.log('页面参数:', options)
	if (options.id) {
		curatorInfo.value.id = options.id
		loadCuratorDetail(options.id)
	}
})

// 加载主理人详情
const loadCuratorDetail = async (id) => {
	try {
		// 使用data.js的one方法调用curator_view模型
		const res = await one('curator_view', {
			id: id
		})
		
		if (res.code === 200 && res.data) {
			// 更新主理人信息
			curatorInfo.value = {
				id: res.data.id || id,
				name: res.data.name || res.data.nickname || '未知用户',
				avatar: res.data.avatar || res.data.headImg || '/static/logo.png',
				gender: res.data.gender || res.data.sex,
				city: res.data.city || res.data.location || '未知',
				birthday: res.data.birthday || res.data.birth || '未知',
				height: res.data.height ? `${res.data.height}cm` : '未知',
				weight: res.data.weight ? `${res.data.weight}kg` : '未知',
				description: res.data.description || res.data.intro || res.data.profile || '暂无简介',
				isFollowed: res.data.isFollowed || false
			}
		} else {
			console.error('获取主理人详情失败:', res.msg || '数据为空')
			uni.showToast({
				title: res.msg || '获取数据失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('加载主理人详情失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	}
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 发送消息
const sendMessage = () => {
	uni.showToast({
		title: '发送消息功能待开发',
		icon: 'none'
	})
}

// 关注/取消关注
const followCurator = async () => {
	try {
		const action = curatorInfo.value.isFollowed ? 'unfollow' : 'follow'
		const res = await one(`curator_${action}`, {
			curatorId: curatorInfo.value.id
		})
		
		if (res.code === 200) {
			curatorInfo.value.isFollowed = !curatorInfo.value.isFollowed
			uni.showToast({
				title: curatorInfo.value.isFollowed ? '关注成功' : '取消关注',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: res.msg || '操作失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('关注操作失败:', error)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

onMounted(() => {
	console.log('主理人详情页面挂载完成')
})
</script>

<style lang="scss" scoped>
.curator-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header-bg {
	background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 50%, #03A9F4 100%);
	padding-bottom: 40rpx;
	position: relative;
}

.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	
	.nav-left {
		.icon-back {
			font-size: 48rpx;
			color: white;
			font-weight: bold;
		}
	}
	
	.nav-right {
		.nav-icon {
			font-size: 48rpx;
			color: white;
			font-weight: bold;
		}
	}
}

.user-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40rpx;
	
	.avatar-container {
		position: relative;
		margin-bottom: 20rpx;
		
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			border: 6rpx solid rgba(255, 255, 255, 0.3);
		}
	}
	
	.user-name {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 10rpx;
	}
	
	.gender-icon {
		.gender-text {
			font-size: 36rpx;
			color: white;
		}
	}
}

.basic-info {
	margin-top: 40rpx;
	padding: 0 30rpx;
	
	.info-row {
		display: flex;
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		backdrop-filter: blur(10rpx);
	}
	
	.info-item {
		flex: 1;
		text-align: center;
		
		.info-label {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 10rpx;
		}
		
		.info-value {
			font-size: 32rpx;
			font-weight: bold;
			color: white;
		}
	}
}

.profile-section {
	margin: 40rpx 30rpx;
	background: white;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
		}
		
		.title-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.profile-content {
		.profile-text {
			font-size: 32rpx;
			line-height: 1.6;
			color: #666;
		}
	}
}

.action-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 30rpx;
	border-top: 1rpx solid #eee;
	
	.btn-row {
		display: flex;
		gap: 20rpx;
	}
	
	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.btn-text {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		&.secondary {
			background: #f5f5f5;
			border: 2rpx solid #ddd;
			
			.btn-text {
				color: #666;
			}
		}
		
		&.primary {
			background: linear-gradient(135deg, #4FC3F7, #29B6F6);
			
			.btn-text {
				color: white;
			}
		}
	}
}

// 暗黑模式适配
@media (prefers-color-scheme: dark) {
	.curator-detail {
		background-color: #1a1a1a;
	}
	
	.profile-section {
		background: #2a2a2a;
		
		.title-text {
			color: #fff;
		}
		
		.profile-text {
			color: #ccc;
		}
	}
	
	.action-buttons {
		background: #2a2a2a;
		border-top-color: #444;
	}
}
</style>
